<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>账单列表</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
    <script type="text/javascript" th:src="@{/js/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" src="/js/My97DatePicker/lang/zh-cn.js"></script>
    <script type="text/javascript" th:src="@{/js/jquery/jquery-1.10.2.min.js}"></script>
</head>
<body class="container">
<br/>
<h1>账单列表</h1>
<br/><br/>

<div class="with:80%">
	<!-- TODO 回显查询数据-->
    <form class="form-inline" id="qf" th:action="@{/bill/list}" th:method="post">
        <input type="hidden" name="pageNum" id="pageNum" th:value="${pageInfo.pageNum}"/>
        <input type="hidden" name="pageSize" id="pageSize" th:value="${pageInfo.pageSize}"/>

        <div class="form-group">
            <label for="typeId" class="control-label">类型</label>
            <select name="typeId" id="typeId" class="form-control">
                <option value= 0 >全部</option>
                <option th:each="type:${allTypes}"
                        th:object="${type}"
                        th:text="${type.name}"
                        th:value="${type.id}"
                        th:selected="${condition.typeId} == ${type.id}" ></option>
                <!--th:selected="${condition.typeId} == ${type.id}"显示查询条件-->
            </select>
        </div>
        <div class="form-group">
            <label for="title" class="control-label"  >标题</label>
            <input type="text" id="title" name="title" class="form-control" th:value="${condition.title}" placeholder="标题"/>
        </div>
        <div class="form-group">
            <label for="begin" class="control-label" >开始时间</label>
            <input type="text" class="form-control" name="beginTime" id="begin"
                   th:value="${condition.getBeginTime()}?${#dates.format(condition.getBeginTime(),'yyyy-MM-dd')}"
                   placeholder="开始时间" onclick="WdatePicker()"/>
        </div>
        <div class="form-group">
            <label for="endTime" class="control-label">结束时间</label>
            <input type="text" class="form-control" name="endTime"  id="endTime"
                   th:value="${condition.getEndTime()}?${#dates.format(condition.getEndTime(),'yyyy-MM-dd')}"
                   placeholder="结束时间" onclick="WdatePicker()"/>
        </div>
        <div class="form-group">
            <input type="submit" value="查询" class="btn btn-info" />
            &nbsp; &nbsp;
            <input type="reset" value="重置" class="btn btn-info" />
            &nbsp; &nbsp;
            <a th:href="@{getType}" class="btn btn-info">添加</a>
        </div>
    </form>
</div>
<br/>


<div class="with:80%">
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>标题</th>
            <th>时间</th>
            <th>金额</th>
            <th>类别</th>
            <th>说明</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody >
		<!-- TODO 回显查询结果-->
        <!--bs为代码里的状态变量 odd 和 even 是定义单双行的样式，其中 odd 是单行，而 even 是双行-->
        <tr th:each="bill,bs:${pageInfo.getList()}" th:object="${bill}" th:style="${bs.odd}? 'background-color:#ffff00'">
            <!--bs.count为循环计数-->
            <th scope="row" th:text="${bs.count}">1</th>
            <td th:text="${bill.title}">交通费</td>
            <!--此处日期需要进行格式化-->
            <td th:text="${bill.billTime}? ${#dates.format(bill.billTime,'yyyy-MM-dd')}">2017-06-26</td>
            <td th:text="${bill.price}">23.35</td>
            <td th:text="${bill.typeName}">2</td>
            <td th:text="${bill.explain}">3</td>
            <td>
                <a th:href="|delete/${bill.id}|">删除</a>
                <a th:href="|getInfo/${bill.id}|">修改</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<ul class="pagination">
    <li>
        <button class="btn btn-warning" id="first">第一页</button>
    </li>
    <li>
        <button class="btn btn-success" id="prev">上一页</button>
    </li>
    <li th:each="p:${pageInfo.navigatepageNums}">
        <button class="btn btn-group-sm" name="pn"
                th:text="${p}" th:disabled="(${p} == ${pageInfo.pageNum})">

        </button>
    </li>
    <li>
        <button class="btn btn-success" id="next">下一页</button>
    </li>
    <li>
        <button class="btn btn-warning" id="last">最后页</button>
    </li>
</ul>

</body>
</html>

<script th:inline="javascript">
    $(function () {
        //初始化变量
        let pageNum = [[${pageInfo.pageNum}]] //当前页
        let pageCount = [[${pageInfo.pages}]] //最后页
        let hasPreviousPage = [[${pageInfo.hasPreviousPage}]] //还有上一页
        let hasNextPage = [[${pageInfo.hasNextPage}]] //还有下一页

        $("#prev").click(function () {
            $("#pageNum").val(pageNum - 1);
            $("#qf").submit();
        });


        $("#next").click(function () {
            $("#pageNum").val(pageNum + 1);
            $("#qf").submit();
        });

        $("#first").click(function () {
            $("#pageNum").val(1);
            $("#qf").submit();
        });

        $("#last").click(function () {
            $("#pageNum").val(pageCount);
            $("#qf").submit();
        });

        //没有上一页
        if (!hasPreviousPage) {
            $("#prev").prop("disabled", true);
            $("#first").prop("disabled", true);
        }

        //没有下一页
        if (!hasNextPage) {
            $("#next").prop("disabled", true);
            $("#last").prop("disabled", true);
        }

        $("button[name='pn']").click(function () {
            $("#pageNum").val($(this).html());
            $("#qf").submit();
        });


    });

</script>
